<template>
  <div class="app-container">
    <!--编写ElementUI组件-->
    <el-form :inline="true" :model="product" class="demo-form-inline">
      <el-form-item label="商品名称">
        <el-input v-model="product.productName" placeholder="请输入商品名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="page(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <br/>
    <!--表格-->
    <el-table
      ref="multipleTable"
      :data="products"
      tooltip-effect="dark"
      style="width: 100%">
      <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
      <el-table-column  label="商品图片" align="center" width="150" >
        <template slot-scope="scope">
          <el-image style="width:150px;height:150px" :src="imgUrl+scope.row.pimage"/>
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="商品名称" align="center" width="150"></el-table-column>
      <el-table-column prop="productPrice" label="商品价格" align="center" width="150"></el-table-column>
      <el-table-column prop="productKind" label="商品类别" align="center" ></el-table-column>
      <el-table-column prop="productNum" label="库存数量" align="center" ></el-table-column>
      <el-table-column prop="productDate" label="商品时间" align="center" ></el-table-column>
      <el-table-column label="操作" min-width="100" align="center">
        <template slot-scope="scope">
          <el-button  size="mini" type="primary" @click="addShoppingCart(scope.row.productId)">加入购物车</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br/>
    <!--分页栏-->
    <el-row>
      <el-col :span="20" align="center">
        <el-pagination background layout="prev, pager, next" :current-page="currentPage" :hide-on-single-page="hidePage" :page-size="pageSize" :total="total" @current-change="page"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import request from '@/utils/cbp-request.js'
  import Cookies from 'js-cookie'
  // 编写vue.js代码
  export default {
    data() {
      return {
        imgUrl:'http://localhost:8088/cbp/static/work/Tomcat/localhost/ROOT/',
        currentPage:1,
        pageSize:5,
        total:0,
        hidePage:true,
        product: {
          productName:''
        },
        products:[],
        userProduct:{
          userId:'',
          productId:''
        }
      }
    },
    methods: {
      page(pageNum){
        var url='/product/pageBuyer/'+pageNum+"/"+this.pageSize+ "/"+1;
        if (this.product.productName.trim()!=null) {
          url = url + "/" + this.product.productName.trim();
        }
        request({
          url:url,
          method:'get',
        }).then((resp) =>{
          this.products = resp.data.list;
          this.total = resp.data.total;
          this.currentPage = resp.data.pageNum;
        })
      },
      // 加入购物车
      addShoppingCart(productId) {
        var userId = Cookies.get('user_id');
        this.userProduct.userId=userId;
        this.userProduct.productId=productId;
        //查询点击按钮所在行的商品
        request({
          url: '/userProduct/',
          method: 'post',
          data:this.userProduct,
        }).then((resp) => {
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
          }
          if (resp.status === 4000) {
            this.$message({
              message: resp.msg,
              type: 'error'
            });
          }
        })
      },
      login(){
        let username=Cookies.get("user_name");
        console.log(username);
        if (username==null){
          this.$router.push({ path: this.redirect || '/login'})
        }
      },
    },mounted() {
      this.page(1);
      this.login();
    }
  }
</script>

<style scoped>
  .app-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 84px);
  }
</style>
